<template>
  <div class="container">
    <div class="row between">
      <div class="user">
        <img
          class="avatar"
          :src="data.avatar_url?data.avatar_url:data.temp_avatar_url"
          mode="aspectFit"
        >
        <span class="user-name">{{data.username}}</span>
      </div>
      <div class="star">
        <div class="star-nor">
          <img
            src="../images/star-nor.png"
            mode="aspectFit"
          >
          <img
            src="../images/star-nor.png"
            mode="aspectFit"
          >
          <img
            src="../images/star-nor.png"
            mode="aspectFit"
          >
          <img
            src="../images/star-nor.png"
            mode="aspectFit"
          >
          <img
            src="../images/star-nor.png"
            mode="aspectFit"
          >
        </div>
        <div class="star-sel">
          <img
            v-for="(item,index) in (data.comment_level-0)"
            :key="index"
            src="../images/star-sel.png"
            mode="aspectFit"
          >
        </div>
      </div>
    </div>
    <div class="row">
      <p class="comment-text">{{data.content}}</p>
    </div>
    <div
      class="row"
    >
      <img
        v-if="images.length>0"
        v-for="(item,index) in images"
        :key="index"
        class="comment-img"
        :src="item"
        mode="aspectFill"
        @click="preView(item)"
      >
      
    </div>
    <div class="row">
      <p class="data">{{data.created_at}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data () {
    return { }
  },
  computed:{
    images(){
      return this.data.image!==""?this.data.image.split(','):[]
    }
  },
  methods: {
    preView (url) {
      var images = this.data.image.split(',')
      if (images.length>0) {
        wx.previewImage({
          current: url,
          urls: images // 当前显示图片的http链接
        })
      }
    }
  },
  mounted () {
  }
}
</script>

<style scoped lang="scss">
.container {
  font-size: 24rpx;
  .row {
    display: flex;
    align-items: center;
    margin: 0 25rpx 10rpx;
  }
  .between {
    justify-content: space-between;
    .user {
      .avatar {
        font-size: 0;
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 20rpx;
      }
      .user-name {
        display: inline-block;
        font-size: 26rpx;
      }
    }
    .star {
      position: relative;
      img {
        width: 30rpx;
        height: 30rpx;
        margin-left: 5rpx;
      }
      .star-nor,
      .star-sel {
        display: flex;
        align-items: center;
      }
      .star-sel {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
  .comment-text,
  .data {
    color: #747474;
  }
  .data {
    font-size: 22rpx;
  }
  .comment-img {
    width: 220rpx;
    height: 220rpx;
    margin-right: 20rpx;
  }
}
</style>
